<template>
	<view class="">
		<view @click='showChange' class="flex bg_a m-t">
			<view class="">
				{{text}}
			</view>
			<u-select v-model="show" :list="list" @confirm="confirm" value-name='id' label-name='feedback_name'>
			</u-select>
			<view class="r">
				<image src="../../static/right.png" alt="">
			</view>
		</view>
		<view class="bg_a m-t">
			<u-input v-model="user_info" placeholder="手机号/邮箱QQ（选填）" />
		</view>
		<view class="p_text">
			问题和意见（必填）
		</view>
		<view class="bg_a">
			<u-input v-model="content" placeholder="请简要描述您的问题和意见" />
		</view>
		<view class="p_text">
			上传图片（最多4张）
		</view>
		<view class="row-voucher b-f">
		  
		  <view class="image-list">
		    <!-- 图片列表 -->
		    <view class="image-preview" v-for="(image, imageIndex) in imageList" :key="imageIndex">
		      <text class="image-delete iconfont icon-shanchu" @click="deleteImage(imageIndex)"></text>
		      <image class="image" mode="aspectFill" :src="image.path"></image>
		    </view>
		    <!-- 上传图片 -->
		    <view v-if="imageList.length < maxImageLength" class="image-picker" @click="chooseImage()">
		      <text class="choose-icon iconfont icon-camera"></text>
		      <text class="choose-text">上传图片</text>
		    </view>
		  </view>
		</view>
		<view class="btn" @click="handleSubmit">
			提交
		</view>
	</view>
</template>

<script>
	import Config from '@/core/config'
	const apiUrl = Config.get('apiUrl')
	import * as Api from '@/api/recovery'
	import * as UploadApi from '@/api/upload'
	const maxImageLength = 4
	export default {
		data() {
			return {
				show: false,
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				action: apiUrl + '/upload/image',
				formData: {
					access_token:uni.getStorageSync('token')
				},
				fileList: [],
				name: '',
				value1: '',
				f_List: [],
				user_info: '',
				content: '',
				image_url: '',
				text: '请选择反馈类型',
				imageList: [],
				// 最大图片数量
				maxImageLength,
				// 按钮禁用
				disabled: false
			}
		},
		onLoad() {
			this.getFeekList()
		},
		methods: {
			showChange() {
				this.show = true
			},
			getFeekList() {
				Api.feedList({})
					.then(result => {
						console.log(result)
						this.list = result.data.list
					})
					.finally()

			},
			confirm(e) {
				console.log(e)
				this.f_List = e;
				this.text = e[0].label
			},
			// 上传成功
			onUploaded(res) {
				this.fileList = res;
				console.log(this.fileList);
			},
			// 无论成功失败都会触发
			onChange(res){
				let data = JSON.parse(res.data)
				console.log(res)
			},
			// 选择图片
			chooseImage() {
			  const app = this
			  const oldImageList = app.imageList
			  // 选择图片
			  uni.chooseImage({
			    count: maxImageLength - oldImageList.length,
			    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			    success({ tempFiles }) {
			      // tempFiles = [{path:'xxx', size:100}]
			      app.imageList = oldImageList.concat(tempFiles)
			    }
			  });
			},
			
			// 删除图片
			deleteImage(imageIndex) {
			  this.imageList.splice(imageIndex, 1)
			},
			
			// 表单提交
			handleSubmit() {
			  const app = this
			  const { imageList } = app
			  // 判断是否重复提交
			  if (app.disabled === true) return false
			  // 按钮禁用
			  app.disabled = true
			  // 判断是否需要上传图片
			  if (imageList.length > 0) {
			    app.uploadFile()
			      .then(() => 
					app.onSubmit()
				  )
			      .catch(err => {
			        app.disabled = false
			        if (err.statusCode !== 0) {
			          app.$toast(err.errMsg)
			        }
			        console.log('err', err)
			      })
			  }else if(app.content==''){
				  console.log(app.feedback_name)
				  app.$toast('请填写问题和意见')
			  } else {
			    app.onSubmit()
			  }
			},
			
			// 提交到后端
			onSubmit() {
			  const app = this			  
			  Api.createFeedBack({
			  		feedback_id: this.f_List[0].value,
			  		feedback_name: this.f_List[0].label,
			  		user_id: uni.getStorageSync('userId'),
			  		user_info: this.user_info,
			  		content: this.content,
			  		image_url: this.formData.images
			  	})
			  	.then(result => {
			  		console.log(result)
			  		this.$navTo('pages/user/index')
			  	})
			  	.finally()
			},
			
			// 上传图片
			uploadFile() {
			  const app = this
			  const { imageList } = app
			  // 批量上传
			  return new Promise((resolve, reject) => {
			    if (imageList.length > 0) {
			      UploadApi.image(imageList)
			        .then(fileIds => {
			          app.formData.images = fileIds
			          resolve(fileIds)
			        })
			        .catch(reject)
			    } else {
			      resolve()
			    }
			  })
			}
		}
	}
</script>

<style>
	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.btn {
		width: 686rpx;
		height: 88rpx;
		background: #66B347;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		margin: 0 auto;
		text-align: center;
		line-height: 88rpx;
		margin-top: 100rpx;
	}

	.bg_a {
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 32rpx 32rpx;
	}

	.p_text {
		padding: 32rpx;
		font-size: 32rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #000000;
	}

	.r {
		width: 16rpx;
		height: 27rpx;
	}

	.r image {
		width: 100%;
		height: 100%;
	}

	.m-t {
		margin-top: 20rpx;
	}
</style>



<style lang="scss" scoped>
	// 上传凭证
	.row-voucher {
	  padding: 24rpx 20rpx;
	
	  .image-list {
	    padding: 0 20rpx;
	    margin-top: 20rpx;
	    margin-bottom: -20rpx;
	
	    &:after {
	      clear: both;
	      content: " ";
	      display: table;
	    }
	
	    .image {
	      display: block;
	      width: 100%;
	      height: 100%;
	    }
	
	    .image-picker,
	    .image-preview {
	      width: 184rpx;
	      height: 184rpx;
	      margin-right: 30rpx;
	      margin-bottom: 30rpx;
	      float: left;
	
	      &:nth-child(3n+0) {
	        margin-right: 0;
	      }
	    }
	
	    .image-picker {
	      display: flex;
	      flex-direction: column;
	      justify-content: center;
	      align-items: center;
	      border: 1rpx dashed #ccc;
	      color: #ccc;
	
	      .choose-icon {
	        font-size: 48rpx;
	        margin-bottom: 6rpx;
	      }
	
	      .choose-text {
	        font-size: 24rpx;
	      }
	    }
	
	    .image-preview {
	      position: relative;
	
	      .image-delete {
	        position: absolute;
	        top: -15rpx;
	        right: -15rpx;
	        height: 42rpx;
	        width: 42rpx;
	        line-height: 42rpx;
	        background: rgba(0, 0, 0, 0.64);
	        border-radius: 50%;
	        color: #fff;
	        font-weight: bolder;
	        font-size: 22rpx;
	        z-index: 10;
	        text-align: center;
	      }
	    }
	  }
	}
</style>
